<template>
	<view v-if="stateVal">
		<view class="order-state-text" :style="{'color': stateColor}" v-if="type == 1">
			{{stateText}}
		</view>
		
		<view class="order-state-icon" v-if="type == 2">
			<view class="text">{{stateText}}</view>
			<image class="img" :mode="'scaleToFill'" :src="`${staticUrl}/status/${stateIcon}-bg.png`"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"order-state",
		props: {
			// 状态类型 1-文本 2-图标
			type: {
				type: Number,
				default: 1
			},
			// 传入的状态值
			stakey: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				staticUrl: this.C.staticNetUrl,
				// 订单状态数组
				statusArr: [
					{
						text: '未确认', 
						val: 'DRIVER_NOT_CONFIRM', 
						color: '#f00000', 
						icon: 'red'
					},
					{ 
						text: '已确认', 
						val: 'DRIVER_CONFIRMED',
						color: '#ff7300',
						icon: 'yellow'
					},
					{
						text: '出发去接客户', 
						val: 'START_TAKE_CUS',
						color: '#008000',
						icon: 'yellow'
					},
					{ 
						text: '已出行', 
						val: 'AL_TRAVEL',
						color: '#008000',
						icon: 'green'
					},
					{
						text: '已完成', 
						val: 'COMPLETED', 
						color: '#00c3ce',
						icon: 'blue'
					}
				],
				
				// 当前状态值
				stateVal: '',
				// 当前状态描述
				stateText: '',
				// 当前状态图标
				stateIcon: '',
				// 当前状态颜色
				stateColor: '',
			};
		},
		watch: {
			// 监听父级传入的事件
			stakey: {
				handler(o){
					if(o){
						let obj = this.statusArr.find(it => it.val == o);
						if(obj){
							this.stateVal = obj.val;
							this.stateText = obj.text;
							this.stateIcon = obj.icon;
							this.stateColor = obj.color;
						}
					}
				},
				immediate: true
			},
		},
		// mounted() { // 废弃
		// 	const that = this;
			
		// 	let obj = that.statusArr.find(it => it.val == that.stakey);
		// 	if(obj){
		// 		that.stateVal = obj.val;
		// 		that.stateText = obj.text;
		// 		that.stateIcon = obj.icon;
		// 		that.stateColor = obj.color;
		// 	}
		// },
		
	}
</script>

<style lang="less">
.order-state-text{
	display: inline-block;
}

.order-state-icon{
	position: absolute;
	top: 0rpx;
	right: 0rpx;

	.text{
		z-index: 9;
		color: #fff;
		position: absolute;
		top: 38rpx;
		left: 24rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
	}
	
	.img{
		width: 180rpx;
		height: 100rpx;
		padding: 10rpx;
	}
}
</style>
